<template>
  <div class="tool-bar">
    <div
      class="bar-container"
      v-for="tools in toolData"
      :key="tools.index"
      @click="handlerClick(tools)"
    >
      <img :src="tools.imgs" alt="" class="bar-img" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      toolData: [
        { index: "0", imgs: require("../../assets/svg/qr-code.svg") },
        { index: "1", imgs: require("../../assets/svg/refresh.svg") },
      ],
    };
  },
  mounted() {},
  methods: {
    handlerClick(e) {
      switch (e.index) {
        case "0":
          this.$store.commit("changeQrCodeVisible", true);
          break;

        case "1":
          location.reload();
          break;
      }
    },
  },
};
</script>

<style scoped>
.tool-bar {
  position: absolute;
  right: 15px;
  bottom: 10%;
  z-index: 2;
}
.bar-container {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #15d08257;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.bar-img {
  width: 100%;
  height: 100%;
}
</style>